<script setup>
	import { ref, onMounted } from 'vue';
	const statusBar = getApp().globalData.statusBar
	const customBar = getApp().globalData.customBar
	
	const props = defineProps({
		back: {
			type: Boolean,
			default: false
		},
		text: {
			type: String,
			default: '标题'
		},
		textColor: {
			type: String,
			default: '#93C5FD'
		}
	})
	
	function backPage() {
		uni.navigateBack()
	}
	
	onMounted(() => {
		
	})
</script>

<template>
	<view class="navbar-content" :style="{height: customBar + 'px', paddingTop: statusBar + 'px'}">
		<view class="navbar-box">
			<view class="navbar-action" @tap="backPage" v-if="back">
				<uv-icon name="arrow-left" :color="textColor" size="40" bold />
			</view>
			<view class="navbar-text" :style="{color: textColor}">{{text}}</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.navbar-content {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 99;
		background: #16254e;
		border-bottom: 2rpx solid rgba(59, 130, 246, 0.2);
		color: #93C5FD;
		.navbar-box{
			width: 100%;
			height: 100%;
			position: relative;
			.navbar-action{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 10;
				padding: 0 10rpx;
			}
			.navbar-text{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>